<template>
  <div :style="style">
    <!-- 444444444444444 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="page"
      :page-sizes="$pageSizeList"
      :page-size="pageSize"
      :layout="layout"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  name: "Pagination",
  props: {
    style: {
      type: Object,
      default: () => ({})
    },
    layout: {
      type: String,
      default: "total, sizes, prev, pager, next, jumper"
    },
    total: {
      type: Number,
      default: 0
    },
    page: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 10
    }
  },
  data() {
    return {};
  },
  mounted() {
    this.initial();
  },
  methods: {
    async initial() {},
    handleCurrentChange(page) {
      this.page = page;
      this.$emit("refreshTable", {
        page: this.page,
        pageSize: this.pageSize
      });
    },
    handleSizeChange(pagesize) {
      this.pageSize = pagesize;
      this.$emit("refreshTable", {
        page: this.page,
        pageSize: this.pageSize
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.index {
}
</style>
